<template>
    <div>
        <h1>role.vue</h1>
        <el-tree style="max-width: 600px" :data="treeData" :props="treeProps"
            @node-click="handleNodeClick" />
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const treeData = ref([])


onMounted(() => {
    axios.get("http://localhost:3000/sys_menu").then(response => {
        console.log(response.data)
        treeData.value = arrayToTree(response.data);
        console.log("tree", treeData.value);
    }).catch(error => {
        console.error("菜单请求失败:", error)
    })

})

const treeProps = ref({
    value: 'id', // 指定节点的值属性
    label: 'name', // 指定节点的显示文本属性（自定义label）
    children: 'children', // 指定子节点数组的属性名
})

function arrayToTree(array, parentId = 0) {
    let result = [];
    for (let item of array) {
        if (item.parentId === parentId) {
            const children = arrayToTree(array, item.id);
            if (children.length) {
                item.children = children;
            }
            result.push(item);
        }
    }
    return result;
}

</script>
<style scoped></style>